<template>
    <div class="content-box" v-loading="loading">
            <h1 style="text-align: center;font-size: 24px;margin: 30px 0;">现任成员</h1>
            <div class="content-box-row clearfix" v-for='(item,index) in newDataList' :key='index'>
              <template v-if='item.length == 4'>
                <div class="content-box-sub" v-for='(items,sindex) in item' :key='items.articleId'>
                  <div class="content-img-box">
                    <img :src="items.articleImg" alt="">
                  </div>
                  <div class="msg-box">
                    <div><img src="../../assets/images/xm.png" alt=""><span>姓名：<em class="grey">{{items.title | stringLengthWork}}</em></span></div>
                    <div><img src="../../assets/images/zz.png" alt=""><span>职责：<em class="grey">{{items.introduction | stringLengthWork}}</em></span></div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="content-box-sub" v-for='(items,sindex) in item' :key='items.articleId'>
                  <div class="content-img-box">
                    <img :src="items.articleImg" alt="">
                  </div>
                  <div class="msg-box">
                    <div><img src="../../assets/images/xm.png" alt=""><span>姓名：<em class="grey">{{items.title | stringLengthWork}}</em></span></div>
                    <div><img src="../../assets/images/zz.png" alt=""><span>职责：<em class="grey">{{items.introduction | stringLengthWork}}</em></span></div>
                  </div>
                </div>
                <div class="null" v-for='(items,sindex) in 4-item.length' :key='sindex'></div>
              </template>
            </div>
            <div class='load-button'>
              <el-button type="primary" @click='addDataList()' v-if='buttonFlag'>加载更多+</el-button>
              <p style="color:#bbb;" v-else>已经到底，没有更多数据了！</p>
            </div>
          </div>
</template>
           
<script>
export default{
      data() {
      return {
        dataList:[],
        newDataList:[],
        pageSize:9,
        pageNum:1,
        buttonFlag:true,
        loading:true
      }
    },
    // props:{
    //   pdata:{
    //     type:Array,		///type: [String, Number],
    //     default:() =>{ return []}
    //   }
    // },
    // computed:{
    //   isShow() {
    //     return this.pdata;
    //   }
    // },
    // watch:{
    //   isShow:{
    //     handler(newv,oldv){
    //       this.dataList = newv
    //       this.newRow(this.dataList)
    //     },
    //     deep:true,
    //     immediate:true,
    //   }
    // },
    methods: {
      row(number){
        let row = parseInt(number/3)
        this.remainder = number%3
        return row
      },
      newRow(dataList){
        this.newDataList = []
        for(var i=0;i<dataList.length;i+=4){
              this.newDataList.push(dataList.slice(i,i+4));
          }
          return this.newDataList
      },
      addDataList(){
        this.pageNum +=1
        this.getParticipatingWorksList()
      },
      async getResearchDivisionMembersList(){
        this.loading = true
        let datalist = await this.API.getResearchDivisionMembersList({
          pageSize:this.pageSize,
          pageNum:this.pageNum
        })
        let res = datalist.rows
       let data = JSON.parse(JSON.stringify(res))
        this.dataSort(data)
        this.pushData(data)
        if(datalist.total == this.dataList){
          this.buttonFlag = false
        }else{
          if(res.length<this.pageSize){
            this.buttonFlag = false
          }else{
            this.buttonFlag = true
          }
        }
        this.loading = false
      },
      pushData(res){
        this.dataList = [...this.dataList,...res]
        this.newRow(this.dataList)
      },
      dataSort(data){
        data.sort(function(x, y){
          return x['orderNum']-y['orderNum'];
        });
      }
    },
    mounted() {
      
      this.getResearchDivisionMembersList()
    },       
}
</script>
<style lang='scss' scoped>
            .content-box{
              .grey{
                color:#aaa;
              }
            width: 100%;
            // overflow: hidden;
            // background-color: #cccc;
            // display: flex;
            .content-box-row{
                // display: flex;
                // flex: 4;
               .content-box-sub{
                  float: left;
                  width: 270px;
                  height: 335px;
                  // background-color: pink;
                  margin-right:30px; 
                  margin-bottom: 30px;
                  border-bottom: 2px solid #ccc;
                  .content-img-box{
                    width: 100%;
                    height:218px;
                    img{
                      width: 100%;
                      height: 190px;
                    }
                  }
                    .msg-box{
                      &>div{
                        // display: flex;
                        // align-items: center;
                        line-height: 22px;
                        padding: 10px 0;
                        img{
                          width: 16px;
                          margin-right: 10px;
                          margin-left: 5px;
                          vertical-align: middle;
                        }
                      }
                    }
              }
              .content-box-sub:hover{
                border-bottom: 2px solid #3246c4;
                transform: translate(2px,-2px);
                box-shadow: -4px 9px 20px 2px rgba(0,0,0,0.3);
                transition: all .2s;
                .msg-box-h1{
                  color: #3246c4;
                }
              }
              .content-box-sub:last-child{
                margin-right:0px;
              }
              .null{
                  width: 270px;
                  height: 335px;
                  // width: 380px;
                  min-height: 300px;
                  // background-color: green;
                  margin-right:10px; 
                  margin-bottom: 10px;
              }
            }
         
        }
        .load-button{
          width: 100%;
          text-align: center;
          margin: 25px 0;
        }
</style>